<template>
  <div class="wrap">
    <div class="firstAdd" v-if="resAddrList.length === 0">
      首次进入请先添加收货地址，为您精准地展示对您有效的商城。
    </div>
    <div v-else>
      <div class="addrItem" v-for="(item, index) in resAddrList" :key="index">
        <img
          src="@/assets/goldAddr.png"
          alt=""
          class="goldAddr"
          @click="chooseThisAddr(item)"
        />
        <div class="addrInfo" @click="chooseThisAddr(item)">
          <div class="nameTop">
            <em class="name">{{ item.nickName }}</em>
            <em class="phone">{{ item.mobile }}</em>
            <em class="defult" v-if="item.status == 1">默认</em>
          </div>
          <div class="addrName">{{ item.detailsAddress }}</div>
        </div>
        <div class="eidt" @click="eidtJump(item)">编辑</div>
      </div>
    </div>
    <div style="height: 100px"></div>
    <!-- <router-link :to="{name:'addReciveAddr'}" replace> -->
    <div class="addAddr" @click="jumpAddAddr()">添加地址</div>
    <!-- </router-link> -->
  </div>
</template>

<script>
import { apiUserAddressList } from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      formId: this.$route.query.formId, //0来至创建订单页
      resAddrList: [], //收货地址列表
      reqShopId: this.$route.query.shopId, //店铺id
    };
  },
  mounted() {
    //  history.go(0)
    sessionStorage.removeItem("addrData");
    this.getUserAddressList();
  },
  methods: {
    //获取用户收货地址列表：
    getUserAddressList() {
      apiUserAddressList({}).then((res) => {
        this.resAddrList = res.data;
        console.log("resAddrList", this.resAddrList);
      });
    },
    //添加地址
    jumpAddAddr() {
      console.log("添加地址", this.formId);
      this.$router.replace({
        path: "/pages/addReciveAddr",
        query: {
          isHaveAddr: this.resAddrList.length == 0 ? 1 : 0,
          formId: this.formId,
          shopId: this.reqShopId,
        }, //如果当前地址列表为空那么即将填写的地址设置为默认地址1
      });
    },
    //编辑地址：
    eidtJump(data) {
      console.log("编辑地址数据", data, this.formId);
      this.$router.push({
        path: "/pages/addReciveAddr",
        query: {
          editAddrItem: data, //如果当前地址列表为空那么即将填写的地址设置为默认地址
          formId: this.formId,
        },
      });
    },
    //选择地址
    chooseThisAddr(data) {
      if (this.formId == 0) {
        //来至订单支付页面
        this.$router.push({
          path: "/pages/orderSure",
          query: {
            chooseNewAddr: data, //如果当前地址列表为空那么即将填写的地址设置为默认地址
            formId: this.formId,
            shopId:this.reqShopId
          },
        });
      }
    },
    onSearch() {},
  },
  created() {},
  components: {},
};
</script>

<style scoped>
.wrap {
  width: 100%;
  min-height: 100vh;
  background-color: #f2f4fa;
  padding-top: 10px;
}
.firstAdd {
  font-size: 14px;
  color: #000;
  font-weight: 800;
  width: 80%;
  text-align: center;
  margin: 25px auto;
  line-height: 30px;
}
.addrItem {
  width: calc(93% - 26px);
  background-color: #fff;
  border-radius: 20px;
  overflow: hidden;
  padding: 25px 13px;
  margin: 0 auto;
  margin-bottom: 10px;
}
.goldAddr {
  width: 49px;
  float: left;
  margin-top: 5px;
}
.addrInfo {
  float: left;
  width: 63%;
  margin-left: 13px;
}
.nameTop {
  font-weight: 300;
  color: #181818;
}
.name {
  font-size: 15px;
}
.phone {
  font-size: 12px;
  margin: 0px 15px;
}
.defult {
  display: inline-block;
  width: 31px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  background: #181818;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 300;
  color: #ffffff;
}
.addrName {
  font-size: 12px;
  font-weight: 300;
  color: #181818;
  margin-top: 17px;
}
.eidt {
  float: right;
  width: 50px;
  text-align: center;
  height: 50px;
  line-height: 50px;
  border-left: 1px solid #e5e5e5;
  font-size: 12px;
  font-weight: 300;
  margin-top: 10px;
}
.addAddr {
  height: 50px;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  line-height: 50px;
  width: 93%;
  text-align: center;
  position: fixed;
  bottom: 30px;
  left: 3.5%;
}
</style>
